<style scoped>
</style>
<template>
  <div class="contents">
    <div class="data-list" v-loading="loading">
      <content-item
        v-for="item in data"
        :key="item._id"
        :title="item.title"
        :author="item.author.username"
        :read="item.read"
        :comment="item.discuss.length"
        :time="$dayjs(item.time).format('YYYY-MM-DD HH:mm:ss')"
        :content="
          item.content.length > 10
            ? item.content.substr(0, 10) + '…'
            : item.content
        "
        @click="dianjile(item)"
      ></content-item>
    </div>
    <foot-menu
      :current="current"
      :count="Math.ceil(count / pagesize)"
      @next="next"
      @prev="prev"
    ></foot-menu>
  </div>
</template>
<script>
import footMenu from "./common/footMenu.vue";
import contentItem from "./common/contentItem.vue";
export default {
  components: {
    footMenu,
    contentItem,
  },
  data: () => ({
    loading: false,
    type: "home",
    data: [],
    count: 0,
    current: 1,
    pagesize: 3,
  }),
  watch: {
    $route(newval) {
      let type = newval.params.type;
      let arr = JSON.parse(JSON.stringify(this.$store.state.base.typeList));
      let currentType = arr.find((item) => item.name == type) || {};
      this.type = currentType._id == undefined ? "home" : currentType._id;
      console.log(this.type);
      this.update();
    },
    type() {
      this.current = 1;
    },
  },
  methods: {
    dianjile(obj){
      let temp = JSON.parse(JSON.stringify(obj))._id;
      console.log(temp);
      this.$router.push(`/desk/detail?id=${temp}`)
    },
    prev() {
      this.current--;
      this.update();
    },
    next() {
      this.current++;
      this.update();
    },
    update() {
      this.loading = true;
      this.$http
        .post("/article/aaaa", {
          type: this.type,
          skip: this.current,
          limit: this.pagesize,
        })
        .then((data) => {
          if (data.data.code == 0) {
            this.count = data.data.count;
            this.data = data.data.list;
            this.loading = false;
          }
        });
    },
  },
  mounted() {
    this.update();
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.current = 1;
      let type = to.params.type;
      let arr = JSON.parse(JSON.stringify(vm.$store.state.base.typeList));
      let currentType = arr.find(item=>item.name == type) || {};
      vm.type = currentType._id == undefined ? "home" : currentType._id;
      console.log(vm.type);
      vm.update();
    });
  },
  beforeDestroy() {
    this.data = [];
    this.count = 0;
    this.current = 1;
    this.pagesize = 5;
  },
};
</script>